<style scoped>
    .img-face {
        max-width: 200px;
        max-height: 200px;
        padding: 10px;
        cursor: pointer;
    }
    .divAmount {
        padding-left: 10px;
        font-weight: bold;
        font-size: 18px;
        height: 30px;
        line-height: 30px;
    }
    .amount1 {
        color: #19be6b;
    }
    .amount1 {
        color: #19be6b;
    }
    .amount2 {
        color: #ed4014;
    }
</style>
<template>
    <div>
        <Card style="margin-bottom: 10px">
            <Form inline class="form-search">
                <FormItem>
                    <RadioGroup v-model="type" @on-change="typeChange" type="button" button-style="solid">
                        <Radio :label="-1">全部</Radio>
                        <Radio :label="1">收入</Radio>
                        <Radio :label="2">支出</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem>
                    <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期" :clearable="false" v-model="sdate"></DatePicker>
                </FormItem>
                <FormItem>
                    <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期" :clearable="false" v-model="edate"></DatePicker>
                </FormItem>
                <FormItem></FormItem>
                <FormItem>
                    <Input v-model="keyword" placeholder="项目/备注" style="width: 200px" />
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="
              page = 1;
              SearchFinance();
            " icon="md-search">查询</Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="AddData()" icon="md-add">记一笔</Button>
                </FormItem>
            </Form>
        </Card>
        <Row :gutter="16">
            <Col span="4" v-for="item in amountList" :key="item.FinanceItemType">
            <div class="divAmount">
                {{item.FinanceItemType==1?'收入':'支出'}}¥:
                <span :class="item.FinanceItemType==1?'amount1':'amount2'">{{item.Amount}}</span>
            </div>
            </Col>
        </Row>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>
        <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]" @on-change="
        (s) => {
          page = s;
          SearchFinance();
        }
      " @on-page-size-change="
        (p) => {
          size = p;
          page = 1;
          SearchFinance();
        }
      " show-total show-sizer />
        <Modal :width="600" draggable v-model="modalTemp" title="记一笔" :mask-closable="false">
            <Form ref="formValidate" :model="tempData" :label-width="100" :rules="ruleValidate">
                <FormItem label="记账日期" prop="OrderDate">
                    <DatePicker :clearable="false" type="date" format="yyyy年MM月dd日" v-model="tempData.OrderDate"></DatePicker>
                </FormItem>
                <FormItem label="记账类型" prop="FinanceItemType">
                    <RadioGroup v-model="tempData.FinanceItemType" type="button" button-style="solid" @on-change="financetypeChange">
                        <Radio size="large" :label="1">收入</Radio>
                        <Radio size="large" :label="2">支出</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem>
                    <Tag @click.native="getItem(item.Name)" v-for="item in financeItems" :key="item.Id" type="dot" closable @on-close="DeleteFinanceItem(item.Id)" :color="item.Type==1?'success':'error'">{{ item.Name }}</Tag>
                </FormItem>
                <FormItem label="记账项目" prop="FinanceItem">
                    <Input v-model="tempData.FinanceItem" />
                </FormItem>
                <FormItem label="金额" prop="FinanceAmount">
                    <Input type="number" v-model="tempData.FinanceAmount" />
                </FormItem>
                <FormItem label="备注" prop="Remark">
                    <Input v-model="tempData.Remark" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalTemp = false">取消</Button>
                <Button type="primary" :loading="loading" @click="SaveFinance">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        SearchFinance,
        SaveFinance,
        DeleteFinance,
        GetFinanceItem,
        DeleteFinanceItem
    } from '@/api/finance'
    export default {
        name: 'finance',
        data() {
            return {
                total: 0,
                page: 1,
                size: 50,
                tableHeight: 450,
                sdate: '',
                edate: '',
                type: -1,
                keyword: '',
                ruleValidate: {},
                loading: false,
                loadingTable: false,
                tempData: {
                    FinanceItemType: 1,
                    FinanceItem: ''
                },
                isPrint: 0,
                modalTemp: false,
                tableTitle: [
                    {
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: 80,
                        render: (h, params) => {
                            return h('span', params.index + (this.page - 1) * this.size + 1)
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 120,
                        render: (h, params) => {
                            var operateArr = []
                            operateArr.push(
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                var vm = this
                                                vm.tempData = params.row
                                                vm.modalTemp = true
                                            }
                                        }
                                    },
                                    '修改'
                                )
                            )
                            operateArr.push(
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.DeleteFinance(params.row.Id)
                                            }
                                        }
                                    },
                                    '删除'
                                )
                            )

                            return h('div', operateArr)
                        }
                    },
                    {
                        key: 'OrderDate',
                        title: '费用日期',
                        width: 120,
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'span',
                                {},
                                this.dayjs(params.row.OrderDate).format('YYYY-MM-DD')
                            )
                        }
                    },
                    {
                        key: 'OrderNo',
                        title: '流水号',
                        width: 150,

                        align: 'center'
                    },

                    {
                        key: 'FinanceItemType',
                        title: '类型',
                        width: 80,

                        align: 'center'
                    },
                    {
                        key: 'FinanceItem',
                        title: '项目',
                        width: 150,

                        align: 'center'
                    },
                    {
                        key: 'FinanceAmount',
                        title: '金额',
                        width: 150,
                        align: 'center'
                    },

                    {
                        key: 'Remark',
                        title: '备注',
                        minWidth: 200,
                        align: 'center'
                    }
                ],
                tableData: [],
                allRoles: [],
                tempRoleIds: [],
                tempDataId: null,
                financeItems: [],
                amountList: []
            }
        },
        computed: {},

        methods: {
            getItem(name) {
                this.tempData.FinanceItem = name
            },
            typeChange() {
                this.page = 1
                this.SearchFinance()
            },
            financetypeChange() {
                this.GetFinanceItem()
            },
            SaveFinance() {
                let vm = this
                if (typeof vm.tempData.OrderDate === 'object') {
                    vm.tempData.OrderDate = vm
                        .dayjs(vm.tempData.OrderDate)
                        .format('YYYY年MM月DD日')
                }
                if (!vm.tempData.OrderDate) {
                    this.$Message.warning('日期不能为空')
                    return
                }

                SaveFinance(vm.tempData).then((res) => {
                    vm.loading = false
                    const data = res.data
                    if (data.StatusCode == 200) {
                        vm.modalTemp = false
                        vm.$Message.success({ title: '提示', content: '保存成功' })
                        if (vm.isPrint) {
                            vm.GetFinanceAndPrint(vm.tempData.Id)
                        }
                        vm.tempData = {}

                        vm.SearchFinance()
                    } else {
                        vm.$Message.error({ title: '提示', content: data.Errors })
                    }
                })
            },
            SearchFinance() {
                let vm = this
                if (typeof vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
                if (typeof vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }

                vm.loadingTable = true
                var reqData = {
                    sdate: vm.sdate,
                    edate: vm.edate,
                    page: vm.page,
                    size: vm.size,
                    type: vm.type,
                    keyword: vm.keyword
                }
                SearchFinance(reqData).then((res) => {
                    vm.loadingTable = false
                    var data = res.data
                    if (data.StatusCode == 200) {
                        vm.tableData = data.Data.Items
                        vm.total = data.Data.TotalCount
                        vm.amountList = data.Extras
                    } else {
                        vm.$Notice.error({
                            title: data.Errors
                        })
                    }
                })
            },
            DeleteFinance(id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定要删除吗？',
                    onOk: () => {
                        DeleteFinance(id).then((res) => {
                            const data = res.data
                            if (data.StatusCode == 200) {
                                this.SearchFinance()
                                this.$Message.success({ title: '提示', content: '删除成功' })
                            } else {
                                this.$Message.error({ title: '提示', content: data.Errors })
                            }
                        })
                    },
                    onCancel: () => { }
                })
            },
            DeleteFinanceItem(id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定要删除吗？',
                    onOk: () => {
                        DeleteFinanceItem(id).then((res) => {
                            const data = res.data
                            if (data.StatusCode == 200) {
                                this.GetFinanceItem()
                            } else {
                                this.$Message.error({ title: '提示', content: data.Errors })
                            }
                        })
                    },
                    onCancel: () => { }
                })
            },
            GetFinanceItem() {
                let vm = this
                GetFinanceItem(vm.tempData.FinanceItemType).then((res) => {
                    var data = res.data
                    if (data.StatusCode == 200) {
                        vm.financeItems = data.Data
                    }
                })
            },
            AddData() {
                var vm = this
                vm.tempData = {
                    Id: 0,
                    FinanceItemType: 1,
                    FinanceItem: '',
                    OrderDate: vm.dayjs().format('YYYY年MM月DD日')
                }
                vm.GetFinanceItem()
                vm.modalTemp = true
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - 300
            this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
            this.edate = this.dayjs().format('YYYY年MM月DD日')
            this.SearchFinance()
        }
    }
</script>

<style>
</style>
